<template>
  <PageWrapDrawer :show="show" :isUpdate="true" :title="'授权'" width="70%"
  @success="onSubmit" 
  @on-drawer-close="onClose">
    <Tabs v-model:activeKey="activeTabsKey">
      <TabPane key="menu" tab="菜单">
        <Menu ref="menuRef" :show="show" :owned-list="menuList" :rid="props.rid"/>
      </TabPane>
      <TabPane key="policy" tab="接口" force-render>
        <Policy ref="policyRef" :show="show" :owned-list="policyList"/>
      </TabPane>
    </Tabs>
  </PageWrapDrawer>
</template>
<script lang="ts" name="RoleDrawerGrant" setup>
import {ref, toRaw, watch} from 'vue';
import {useMessage} from '/@/hooks/web/useMessage';
import {PageWrapDrawer} from '/@/components/PageWrapDrawer'
import {grant, owned} from '/@/api/admin/role';
import Menu from './Menu.vue';
import Policy from './Policy.vue';
import {
  Tabs,
  TabPane
} from 'ant-design-vue';

// https://blog.csdn.net/qq_49327308/article/details/124467691
const {createMessage,} = useMessage();
const {info, success, warning, error} = createMessage;

const emit = defineEmits(['success', 'on-drawer-close'])
const props = defineProps({
    show: Boolean,
    rid: Number,
})

const policyRef = ref()
const menuRef = ref()
const activeTabsKey = ref('menu');
const menuList = ref([])
const policyList = ref([])

watch(() => props.show, async (v1, _) => {
  if (v1) {
    await owned({rid: props.rid}).then(dd => {
      menuList.value = dd.menuList
      policyList.value = dd.policyList
    })
  }
})

const onSubmit = async () => {
  let list1 = policyRef.value.getCheckedRowList()
  let list2 = menuRef.value.getCheckedRowList()
  await grant({
    rid: props.rid,
    pidList: list1.map(e => e.id),
    midList: list2.map(e => {
      return {id: e.id, bid: toRaw(e.ownedBidList)}
    }),
  })
  onClose()
}

const onClose = () => {
  menuList.value = []
  policyList.value = []
  activeTabsKey.value = 'menu'
  emit('on-drawer-close');
};
</script>
<style scoped>
:deep().ant-drawer-body{
  padding: 0 24px !important;
}
</style>
